<template>
  <el-drawer :visible.sync="visible" :title="title" :modal-append-to-body="true" :append-to-body="true"
    :destroy-on-close="false" :modal="true" direction="rtl" :wrapperClosable="false" custom-class="form-drawer"
    size="450px" @closed="closed">

    <div class="form-drawer__content">
      <el-form ref="formData" :model="formData" :rules="rules" style="padding: 20px;">
        <el-form-item :label-width="formLabelWidth" label="中文名称" prop="cnText">
          <el-input v-model="formData.cnText" placeholder="中文名称" autocomplete="off" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="英文名称" prop="enText">
          <el-input v-model="formData.enText" placeholder="英文名称" autocomplete="off" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="场景图层">
          <el-select v-model="items" multiple collapse-tags placeholder="请选择" style="width: 100%;">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="坐标类型" prop="type">
          <el-select v-model="formData.coordType" placeholder="请选择" style="width: 100%;">
            <el-option label="cad坐标" value="0"></el-option>
            <el-option label="经纬度坐标" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="坐标" prop="name">
          <el-input v-model="formData.coord" placeholder="坐标" autocomplete="off" />
        </el-form-item>
      </el-form>

      <div class="form-drawer__footer">
        <el-button @click="closed" :loading="loading">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="submitForm">确 定</el-button>
      </div>
    </div>

  </el-drawer>
</template>

<script>
  import {
    savePoi,
    getPoiLayer,
  } from '@/api/scenesrc/poi'
  import {
    findLayerAll,
  } from '@/api/scenesrc/layer'
  export default {
    name: 'InfoDialog',
    components: {},
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed: {},
    watch: {
      properties: {
        handler: function(value) {
          this.visible = value.visible
          if (value.data) {
            this.formData.id = value.data.id || ''
            this.formData.cnText = value.data.cnText || ''
            this.formData.enText = value.data.enText || ''
            this.formData.coordType = value.data.coordType || '0'
            this.formData.coord = value.data.coord || ''
          } else {
            this.formData.id = ''
            this.formData.cnText = ''
            this.formData.enText = ''
            this.formData.coordType = '0'
            this.formData.coord = ''
          }
          if (value.type) {
            this.type = value.type
            if (value.type === '0') {
              this.title = '添加POI'
            }
            if (value.type === '1') {
              this.title = '编辑POI'
            }
          }
        },
        immediate: true,
        deep: false
      }
    },
    data() {
      return {
        visible: false,
        title: '',
        loading: false,
        type: '',
        formData: {
          id: '',
          cnText: '',
          enText: '',
          coordType: '0',
          coord: '',
        },
        formLabelWidth: '100px',
        options: [],
        items: [],
        rules: {
          cnText: [{
              required: true,
              message: '请输名称',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 50,
              message: '长度在 2 到 50 个字符',
              trigger: 'blur'
            }
          ],
        }
      }
    },
    created() {
      this.getOptions()
      if (this.type === '1') this.getItems()
    },
    methods: {
      getOptions: function() {
        findLayerAll().then(rsp => {
          if (200 == rsp.code) {
            this.options = rsp.result
          }
        })
      },
      getItems: function() {
        getPoiLayer({
          id: this.formData.id
        }).then(rsp => {
          if (200 == rsp.code) {
            let arr = []
            rsp.result.forEach(function(item, index) {
              arr.push(item.layerId)
            })
            this.items = arr;
          }
        })
      },
      submitForm: function() {
        this.$refs.formData.validate((valid) => {
          if (valid) {
            this.loading = true
            savePoi({
                poi: JSON.stringify(this.formData),
                layerIds: JSON.stringify(this.items)
              }).then(rsp => {
                if (200 == rsp.code) {
                  this.$message({
                    type: 'success',
                    message: rsp.message
                  })
                }
                this.closed()
              }).catch(err => {
                console.log(err);
              })
              .finally(() => {
                this.loading = false
              })
          }
        })
      },
      closed: function() {
        this.$emit('closed', false)
      },
    }
  }
</script>


<style lang="scss">
</style>
